<template>
  <div class="person">
   
    <h1>中国</h1>
    <h1 ref="title2">背景</h1>
    <h1>尚硅谷</h1>
    <button @click="showLog">点我输出h2这个元素</button>
    
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,defineExpose } from 'vue';

// 创建一个 title2,用于存储ref标记的内容
let title2 = ref()

let a = ref(0)

let b=ref(2)
let c=ref(3)

function showLog() {
  console.log(title2.value)
}
defineExpose({a,b,c})

</script>

<style scoped>
.person {
  background-color: rgb(218, 114, 200);
  box-shadow: 0 010px;
  border-radius: 10px;
  padding: 20px;
}

button {
  background-color: darkseagreen;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>